import React, {useState} from 'react';
import {Alert, Dimensions, Image, Linking, Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {getImgUrl} from "../../../utils/ComFunction";

const screenW = Dimensions.get('window').width;

const BuyerItemView = ({item, onPress}) => {
    return (
        <TouchableOpacity
            activeOpacity={0.8}
            key={item.contractNo}
            onPress={onPress}>
            {/* 列表数据 */}
            <View style={styles.itemcontainer}>
                {/* 买手相关 */}
                <View style={styles.contractCarContainer}>
                    {item.avatar ? (
                        <Image
                            style={styles.contractcar}
                            source={{
                                uri: getImgUrl(item.avatar),
                            }}
                        />
                    ) : (
                        <Image
                            source={require('source/image/seekCenter/default_avatar.png')}
                            style={styles.contractcar}
                        />
                    )}
                </View>

                <View style={styles.buyerInfoList}>
                    <View style={styles.buyerInfo}>
                        <Text style={{color: '#333', fontSize: 14}}>{item.fullname ? item.fullname : ''}</Text>
                        <Text> </Text>
                        <Text style={{color: '#FFA500', fontSize: 13}}>
                            @{item.merchantAbbreviation ? item.merchantAbbreviation : '暂无'}
                        </Text>
                        {/*<View style={{backgroundColor: '#F5F5F5', width: 50, paddingVertical: 3, borderRadius: 3}}>*/}
                        {/*    {*/}
                        {/*        item.nowLoginUserIsFollow == 1*/}
                        {/*            ?*/}
                        {/*            <Text style={{color: '#333', fontSize: 13, textAlign: 'center'}}>已关注</Text>*/}
                        {/*            :*/}
                        {/*            <Text style={{color: '#333', fontSize: 13, textAlign: 'center'}}>关注</Text>*/}
                        {/*    }*/}
                        {/*</View>*/}
                    </View>
                    <View style={styles.buyerInfoDesc}>
                        <Text
                            numberOfLines={2}
                            ellipsizeMode="tail"
                            style={{fontSize: 14, color: '#666'}}>
                            简介: {item.preferences ? item.preferences : '暂无信息'}
                        </Text>
                    </View>
                    <View style={styles.buyerInfoTage}>
                        {/* 遍历 item.buyerTags */}
                        {item.limitShowBuyerTags?.map((tag, index) => {
                            if(tag.tagValueText == '不限'){
                                return null;
                            }
                            return (
                                <View style={styles.tagItem} key={index}>
                                    <Text style={styles.tagText}>
                                        {tag.tagValueText  ? tag.tagValueText : ''}
                                    </Text>
                                </View>
                            );
                        })}
                    </View>
                </View>
            </View>
            <View style={styles.sepLine} />
        </TouchableOpacity>
    );
};

const styles = StyleSheet.create({
    itemcontainer: {
        backgroundColor: '#ffffff',
        flexDirection: 'row',
        paddingHorizontal: 15,
        paddingVertical: 15,
    },
    contractCarContainer: {
        borderRadius: 8,
        flexDirection: 'row',
    },
    contractcar: {
        width: 87,
        height: 121,
        borderRadius: 6,
        // marginRight: 15
    },
    buyerInfoList: {
        marginHorizontal: 12,
        width: '67%',
        // backgroundColor: '#c5c5c5',
        overflow: 'hidden'
    },
    buyerInfo: {
        flexDirection: 'row',
        justifyContent: 'flex-start',
    },
    buyerInfoDesc: {
        marginTop: 5,
    },
    buyerInfoTage: {
        flexWrap: 'wrap',
        flexDirection: 'row',
        marginTop: 10,
    },
    tagItem: {
        backgroundColor: '#fff399', // 背景色
        borderRadius: 4, // 圆角
        paddingVertical: 2,
        paddingHorizontal: 6,
        marginRight: 8, // 标签之间的间距
        marginTop: 5,
    },
    tagText: {
        fontSize: 11, // 字体大小
        color: '#333333', // 文字颜色
    },
    sepLine: {
        position: 'absolute',
        bottom: 0,
        left: 15,
        width: screenW - 15,
        height: 0.5,
        backgroundColor: '#e4e4e4',
    },
});

export default BuyerItemView;